<script type="text/javascript">
$('#doc-datagrid-table4').datagrid({
    columns: [{name:'name', width:'150', label:'姓名'}, {name:'firstname', width:'120', label:'拼音姓'}, {name:'lastname', label:'拼音名'}],
    data: [{'name':'孙悟空','firstname':'Sun','lastname':'Wukong'},{'name':'罗宾汉','firstname':'Luo','lastname':'Binhan'},{'name':'美国队长','firstname':'Meiguo','lastname':'Duizhang'}]
})
</script>
<div class="bjui-pageContent">
    <div style="padding:20px;">
        <ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#datagrid-demo4-demo" role="tab" data-toggle="tab">示例</a></li>
            <li><a href="#datagrid-demo4-source" role="tab" data-toggle="tab">源码</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade active in" id="datagrid-demo4-demo">
                <table id="doc-datagrid-table4"></table>
            </div>
            <div class="tab-pane fade" id="datagrid-demo4-source">
                <pre class="brush: js; html-script: true">
                    &lt;script type="text/javascript">
                    $('#doc-datagrid-table4').datagrid({
                        columns: [{name:'name', width:'150', label:'姓名'}, {name:'firstname', width:'120', label:'拼音姓'}, {name:'lastname', label:'拼音名'}],
                        data: [{'name':'孙悟空','firstname':'Sun','lastname':'Wukong'},{'name':'罗宾汉','firstname':'Luo','lastname':'Binhan'},{'name':'美国队长','firstname':'Meiguo','lastname':'Duizhang'}]
                    })
                    &lt;/script>
                    &lt;table id="doc-datagrid-table4">&lt;/table>
                </pre>
            </div>
        </div>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>